import * as THREE from 'three';
import { Tshare } from "../utils/Tshare";

let container = document.getElementById("app"),
    T = new Tshare(), sphere = null,clock = new THREE.Clock(),
    uniforms = {
        'time': { value: 1.0 }
    };


const v_str = `
varying vec2 vUv;
void main(void) {
    vUv = uv;
    vec4 mvPosition = modelViewMatrix * vec4(position ,1.0);
    gl_Position = projectionMatrix * mvPosition;
}
    `
const f_str = `
uniform float time;
varying vec2 vUv;
void main(void){
    vec2 position = -1.0 + 2.0 * vUv;
    float red = abs(sin(position.x * position.y + time / 5.0));
    float green = abs(sin(position.x * position.y + time / 4.0));
    float blue = abs(sin(position.x * position.y + time / 3.0));
    gl_FragColor = vec4(red,green,blue,1.0);
}
`

init();
run();
function init() {
    T.initEnv(container).initOrbitControls();
    addBox()
}

function run() {
    requestAnimationFrame(run);
    T.renderer.render(T.scene, T.camera);
    const delta = clock.getDelta();
    uniforms[ 'time' ].value += delta * 5;
}

function addBox() {
    let geometry = new THREE.BoxGeometry(1,1,1);
    let material = new THREE.ShaderMaterial( {
        uniforms: uniforms,
        vertexShader: v_str,
        fragmentShader: f_str
    } );
    let mesh = new THREE.Mesh(geometry, material);
    mesh.frustumCulled = false;
    T.scene.add(mesh)
}